/* eslint-disable no-use-before-define */
/* eslint-disable react/react-in-jsx-scope */
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react'
import {
    View,
    Text,
    StyleSheet,
    SectionList,
    TouchableOpacity,
} from 'react-native';
import { Container, ListFooterComponent } from '../../component';
import Search from './component/Search';
import LoadingScreen from './LoadingScreen';
import { deviceInfo } from '../../utils/deviceInfo';
import { Actions } from 'react-native-router-flux';

const styles = StyleSheet.create({
    title: {
        marginTop: 12,
        marginBottom: 4,
        fontWeight: 'bold',
    },
    itemContainer: {
        width: (deviceInfo.deviceWidth - 36) / 2,
        height: 32,
        marginTop: 8,
        borderRadius: 4,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
})

@inject('speechStore')
@observer
export default class Speech extends Component {

    componentDidMount() {
        this.props.speechStore.loadSpeechList()
    }

    _renderLoading() {
        const { loadingPercent } = this.props.speechStore
        return <LoadingScreen
            loadingPercent={loadingPercent}
        />
    }

    _renderSearchHeader() {
        const { isLoading } = this.props.speechStore
        if (isLoading)
            return

        return (
            <Search
                isEditable={false}
                onPress={() => {
                    Actions.speechSearch()
                }}
            />
        )
    }

    _renderItem(items) {
        return (
            <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', }}>
                {
                    items.map((item, index) => {
                        return (
                            <TouchableOpacity
                                activeOpacity={0.6}
                                key={index}
                                onPress={() => {
                                    Actions.speechSearch({
                                        title: item
                                    })
                                }}
                                style={styles.itemContainer}>
                                <Text>{item}</Text>
                            </TouchableOpacity>
                        )
                    })
                }
            </View>
        )
    }

    render() {
        const { isLoading, formattedCategoryList } = this.props.speechStore
        return (
            <Container
                naviBarProps={{
                    title: '聊天话术',
                    leftElement: null,
                }}>

                {this._renderSearchHeader()}

                <SectionList
                    keyExtractor={(item, index) => item + index}
                    ListEmptyComponent={() => this._renderLoading()}
                    ListFooterComponent={() => <ListFooterComponent haMore={false} />}
                    renderItem={({ item, index, section }) => this._renderItem(item)}
                    renderSectionHeader={({ section: { title } }) => (
                        <Text style={styles.title}>{title}</Text>
                    )}
                    sections={formattedCategoryList}
                    stickySectionHeadersEnabled={false}
                    style={{ paddingHorizontal: isLoading ? 0 : 12, flex: 1, }}
                />
            </Container>
        )
    }
}